<template>
  <div>
    <!-- 管理容器 -->
    <admin-container>
      <template v-slot:content>
        <!-- 表格插件 -->
        <table-plugin
          :page="page"
          :config="config"
          :part-operate="partOperate"
          :global-operate="globalOperate"
          :search-operate="searchOperate"
          @part="partOperateActuator"
          @search="searchOperateActuator"
          @global="globalOperateActuator"
        />
      </template>
    </admin-container>

    <!-- 抽屉组件 -->
    <el-drawer
      :title="drawer.title"
      :visible="drawer.flag"
      size="50%"
      @close="
        $refs['matchRef'].clearValidate();
        match = {};
        compTime = [];
        drawer.flag = false;
      "
      @open="builderTime"
    >
      <div class="drawer-main">
        <!-- 表单 -->
        <el-form
          label-width="80px"
          :model="match"
          :rules="rules"
          ref="matchRef"
        >
          <!-- 竞赛标题 -->
          <el-form-item label="竞赛标题" prop="title">
            <el-input v-model="match.title" placeholder="请输入竞赛标题" />
          </el-form-item>
          <!-- 竞赛时间 -->
          <el-form-item label="竞赛时间" required>
            <el-date-picker
              v-model="compTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 竞赛内容 -->
          <el-form-item label="竞赛内容" prop="content" class="deep-textarea">
            <!-- <el-input type="textarea"  v-model="match.content" placeholder="请输入竞赛内容"  /> -->
            <div v-if="drawer.flag">
              <editor-plugin :content="match.content" @html="getContent" />
            </div>
          </el-form-item>
        </el-form>

        <!-- 按钮 -->
        <div class="drawer-btn">
          <el-button type="primary" size="medium" @click="submit"
            >确定提交</el-button
          >
          <el-button size="medium" @click="drawer.flag = false">关闭</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 竞赛内容预览 -->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.flag"
      width="80%"
      @close="dialog.content = ''"
      @open="openHandler"
    >
      <div class="editor-content-view" v-html="dialog.content"></div>
    </el-dialog>
  </div>
</template>

<script>
import AdminContainer from "@/components/plugs/admin-container/AdminContainer.vue";
import TablePlugin from "@/components/plugs/table-plugin/TablePlugin.vue";
import { post, get } from "@/utils/api";
import EditorPlugin from "@/components/plugs/editor-plugin/EditorPlugin.vue";
import "@/assets/css/html.css";
import Prism from "prismjs";
import "prismjs/themes/prism.css";

export default {
  data() {
    return {
      drawer: {
        title: "添加竞赛", // 抽屉标题
        flag: false, // 抽屉显示标志
      },
      dialog: {
        title: "", // 对话框标题
        flag: false, // 对话框显示标志
        content: "", // 对话框内容
      },
      match: {
        textlength: 0, // 竞赛内容长度
      },
      compTime: [], // 竞赛时间范围
      rules: {
        title: [
          { required: true, message: "竞赛标题不能为空", trigger: "blur" }, // 竞赛标题的校验规则
        ],
        content: [
          { required: true, message: "竞赛内容不能为空", trigger: "blur" }, // 竞赛内容的校验规则
        ],
      },
      page: {}, // 分页数据
      config: {
        columns: [
          {
            fixed: false,
            prop: "id",
            label: "竞赛编号",
            width: "120",
          },
          {
            fixed: false,
            prop: "title",
            label: "竞赛标题",
            width: "150",
          },
          {
            fixed: false,
            prop: "startTime",
            label: "竞赛开始时间",
            width: "150",
          },
          {
            fixed: false,
            prop: "endTime",
            label: "竞赛结束时间",
            width: "150",
          },
        ],
      },
      partOperate: [
        { type: "preview", text: "预览", level: "text", color: "" },
        { type: "update", text: "修改", level: "text", color: "" },
        { type: "delete", text: "删除", level: "text", color: "red" },
      ],
      searchOperate: {
        entity: {},
        condition: [
          {
            label: "标题",
            prompt: "查询竞赛标题(模糊查询)",
            type: "input",
            width: "300px",
            name: "title",
          },
        ],
      },
      globalOperate: {
        left: [{ type: "add", text: "发布竞赛", level: "primary", icon: "" }],
        right: [],
      },
    };
  },
  methods: {
    getContent(html, text) {
      console.log("父组件收到的html内容:", text.length);
      this.match.content = html;
      this.match.textlength = text.length;
    },
    getPage() {
      const promise = get({
        url: "/base-match/back/match/page",
        params: {
          current: this.page.current,
          size: this.page.size,
          title: this.searchOperate.entity.title,
        },
      });

      promise.then((res) => {
        if (res.code === 200) {
          this.page = res.data;
        }
      });
    },
    partOperateActuator(index, row, operate) {
      console.log("op", operate);

      switch (operate.type) {
        case "update":
          this.drawer.flag = true;
          this.drawer.title = "修改竞赛信息";
          this.match = JSON.parse(JSON.stringify(row));
          break;
        case "delete":
          this.deleteMatch(row);
          break;
        case "preview":
          this.previewMatchContent(row);
          break;
      }
    },
    globalOperateActuator(entity) {
      switch (entity.operate.type) {
        case "add":
          this.drawer.flag = true;
          this.match.content = "";
          this.drawer.title = "新增竞赛";
          break;
      }
    },
    searchOperateActuator() {
      this.getPage();
    },
    deleteMatch(row) {
      const promise = post({
        url: "/base-match/back/match/delete",
        data: { id: row.id },
      });

      promise.then((res) => {
        if (res.code === 200) {
          this.$message.success(res.message);
          this.getPage();
          return;
        }
        this.$message.error(res.message);
      });
    },
    submit() {
      this.$refs["matchRef"].validate((valid) => {
        if (valid) {
          if (this.match.textlength === 0) {
            this.$message.error("竞赛内容不能为空~");
            return;
          }
          if (this.compTime.length < 2) {
            this.$message.error("请选择竞赛时间~");
            return;
          }

          const promise = post({
            url: "/base-match/back/match/save-or-update",
            data: { ...this.match },
          });

          promise.then((res) => {
            if (res.code === 200) {
              this.getPage();
              this.$message.success(res.message);
              this.drawer.flag = false;
              return;
            }
            this.$message.error(res.message);
          });
        } else {
          this.$message.error("表单数据校验失败，请检查~");
        }
      });
    },
    changeDate() {
      this.match.startTime = this.compTime[0];
      this.match.endTime = this.compTime[1];
    },
    builderTime() {
      if (this.match.startTime) {
        this.$set(this.compTime, 0, this.match.startTime);
      }
      if (this.match.endTime) {
        this.$set(this.compTime, 1, this.match.endTime);
      }
    },
    previewMatchContent(row) {
      this.$nextTick(() => {
        this.dialog.content = row.content;
        this.dialog.flag = true;
        this.dialog.title = `预览:《${row.title}》的内容`;
      });
    },
    openHandler() {
      this.$nextTick(() => {
        Prism.highlightAll();
      });
    },
  },
  components: {
    AdminContainer,
    TablePlugin,
    EditorPlugin,
  },
  created() {
    this.getPage();
  },
  mounted() {},
};
</script>

<style scoped>
.drawer-main {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  padding-bottom: 50px;
}

.drawer-btn {
  position: fixed;
  bottom: 0;
  padding-bottom: 20px;
}

.deep-textarea >>> textarea {
  height: 400px;
  resize: none;
}
</style>
